/* eslint-disable react/display-name */
import React, { Component } from 'react'
import { address } from '@/Utils/apiConfig'
import getData from '@/Utils/fecth'
import { Table } from 'antd'
import moment from 'moment'
import { APP_TIMESTAMP_FORMAT } from '@/Utils/CONST'

const { monitor: { recentBlock, recentTx }} = address

export default class listPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      consortiumId: props.location.pathname.split('?')[0].split('/')[4],
      consortiumName: props.location.pathname.split('?')[0].split('/')[5],
      pageNum: 1,
      pageSize: 10,
      dataList: [],
      cloumn: null,
      key: '',
      channelId: '',
      type: '',
      total: 0,
    }
  }

  componentDidMount() {
    const pathname = this.props.location.pathname
    const pathArr = pathname.split('/')
    const channelId = pathArr[pathArr.length - 1] // 获取通道id
    const type = pathArr[pathArr.length - 2] // 类型
    let cloumn = null
    let key = ''
    if (type === 'allBlock') {
      this.getAllBlock(channelId)
      cloumn = blockCloumn
      key = 'id'
    } else if (type === 'allTransactions') {
      this.getAllTx(channelId)
      cloumn = txCloumn
      key = 'id'
    }
    this.setState({
      cloumn,
      key,
      channelId,
      type,
    })
  }

  getAllBlock = (channelId) => {
    const { consortiumId, pageNum, pageSize } = this.state
    getData().get(recentBlock.format({ consortiumId, channelId, pageNum, pageSize })).then(res => {
      if (res.status === 200) {
        this.setState({
          dataList: res.data.blocks || [],
          total: res.data.totalNum || 0,
        })
      }
    })
  }

  onChange = (pageNum, pageSize) => {
    this.setState({
      pageSize,
      pageNum,
    }, this.getList)
  }

  getList = () => {
    const { type, channelId } = this.state
    type === 'allBlock' ? this.getAllBlock(channelId) : this.getAllTx(channelId)
  }

  getAllTx = (channelId) => {
    const { consortiumId, pageNum, pageSize } = this.state
    getData().get(recentTx.format({ consortiumId, channelId, pageNum, pageSize })).then(res => {
      if (res.status === 200) {
        let data = res.data.transactions || []
        const totalNum = res.data.totalNum || 0
        data.length && data.map((item, index) => {
          item.No = totalNum - index - ((pageNum - 1) * pageSize)
          return item
        })
        this.setState({
          dataList: data,
          total: totalNum,
        })
      }
    })
  }

  clickRowFn = (event, type, data) => {
    const { consortiumId, channelId, consortiumName } = this.state
    let pathname = ''
    if (type === 'allBlock') {
      pathname = `/dashboard/fabric/leagueInfo/${consortiumId}/${consortiumName}/blockDetail/${channelId}/${data.id || data.uuid}`
    } else {
      pathname = `/dashboard/fabric/leagueInfo/${consortiumId}/${consortiumName}/transactionsDetail/${channelId}/${data.id || data.uuid}`
    }

    this.props.history.push({
      pathname,
    })
  }

  render() {
    const { key, cloumn, dataList, total, pageNum } = this.state
    return (
      <div className="list-page common">
        <Table
          rowKey={key}
          columns={cloumn}
          dataSource={dataList}
          onRow={record => {
            return {
              onClick: (event) => { this.clickRowFn(event, this.state.type, record) }, // 点击行
            }
          }}
          page
          pagination={{
            total,
            current: pageNum,
            onChange: this.onChange,
          }}
        />
      </div>
    )
  }
}

const blockCloumn = [
  {
    title: '区块号',
    dataIndex: 'height',
    sorter: {
      compare: (a, b) => a.height - b.height,
    },
  },
  {
    title: 'Hash',
    dataIndex: 'data_hash',
  },
  {
    title: '交易数',
    dataIndex: 'tx_number',
  },
  {
    title: '生成时间',
    dataIndex: 'timestamp',
    render: (text) => (
      <span>{moment(text).format(APP_TIMESTAMP_FORMAT)}</span>
    ),
    sorter: {
      compare: (a, b) => {
        return moment(a.timestamp).valueOf() - moment(b.timestamp).valueOf()
      },
    },
  },
]

const txCloumn = [
  {
    title: '序号',
    dataIndex: 'No',
    sorter: {
      compare: (a, b) => a.No - b.No,
    },
  },
  {
    title: 'Hash',
    dataIndex: 'tx_hash',
  },
  {
    title: '生成时间',
    dataIndex: 'timestamp',
    render: (text) => (
      <span>{moment(text).format(APP_TIMESTAMP_FORMAT)}</span>
    ),
    sorter: {
      compare: (a, b) => moment(a.timestamp).valueOf() - moment(b.timestamp).valueOf(),
    },
  },
]
